// 这是项目的根组件
import React from 'react'
// 导入react-router
import {HashRouter,Route,Link} from 'react-router-dom'

// 导入antd组件
import { Layout, Menu} from 'antd';
const { Header, Content, Footer } = Layout;
// 导入模块化的样式
import styles from './css/app.scss'

// 导入组件
import HomeContainer from './components/home/HomeContainer.jsx'
import MovieContainer from './components/movie/MovieContainer.jsx'
import AboutContainer from './components/about/AboutContainer.jsx'

export default class App extends React.Component{
  constructor(props){
    super(props)
    this.state = {}
  }
  componentWillMount(){
    console.log(window.location.hash.split('/'))
  }
  render(){
    return <HashRouter>
      <Layout className="layout" style={{height: '100%'}}>
        {/* headr头部区域 */}
        <Header>
          <div className={ styles.logo } />
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={[window.location.hash.split('/')[1]]}
            style={{ lineHeight: '64px' }}
          >
            <Menu.Item key="home">
              <Link to="/home">首页</Link>
            </Menu.Item>
            <Menu.Item key="movie">
              <Link to="/movie/in_theaters/1">电影</Link>
            </Menu.Item>
            <Menu.Item key="about">
             <Link to="about">关于</Link>
            </Menu.Item>
          </Menu>
        </Header>
          {/* 主体区 */}
        <Content style={{background: '#fff', felx:1 }}>
          <Route path="/home" component={HomeContainer}></Route>
          <Route path="/movie" component={MovieContainer}></Route>
          <Route path="/about" component={AboutContainer}></Route>
        </Content>
        {/* 页脚区 */}
        <Footer style={{ textAlign: 'center' }}>webPage @chenguangxueMaking</Footer>
      </Layout>
    </HashRouter>
  }
}